<template>
	<view class="bg">
		<xl-navbar title="Mask遮罩层" fixed shadow></xl-navbar>
		<xl-list-item title="基础样式" arrow @click="open(1)"></xl-list-item>
		<xl-list-item title="设置zIndex" arrow @click="open(2)"></xl-list-item>
		<xl-list-item title="设置透明度" arrow @click="open(3)"></xl-list-item>
		<xl-list-item title="设置遮罩高度" arrow @click="open(4)"></xl-list-item>
		<xl-list-item title="关闭点击遮罩层关闭功能,默认开启" arrow @click="open(5)"></xl-list-item>
		<xl-list-item title="内容插槽" arrow @click="open(6)"></xl-list-item>
		<xl-list-item title="修改内容插槽显示动画" arrow @click="open(7)"></xl-list-item>
		<xl-list-item title="内容插槽相对页面位置" arrow @click="open(8)"></xl-list-item>
		
		<xl-mask v-model="show1"></xl-mask>
		<xl-mask v-model="show2" zIndex="99999"></xl-mask>
		<xl-mask v-model="show3" opacity="0.6"></xl-mask>
		<xl-mask v-model="show4" top="300"></xl-mask>
		<xl-mask v-model="show5" :clickClose="false" @click="clickMask"></xl-mask>
		<xl-mask v-model="show6">
			<view class="content">
				测试
			</view>
		</xl-mask>
		<xl-mask v-model="show7" enterMode="fade-down" leaveMode="fade-down"> 
			<view class="content">
				测试
			</view>
		</xl-mask>
		<xl-mask v-model="show8" position="relative"> 
			<view class="content">
				测试
			</view>
		</xl-mask>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed } from "vue";
	
	const show1 = ref(false)
	const show2 = ref(false)
	const show3 = ref(false)
	const show4 = ref(false)
	const show5 = ref(false)
	const show6 = ref(false)
	const show7 = ref(false)
	const show8 = ref(false)
	
	function open(index){
		if(index == 1) show1.value = true
		else if(index == 2) show2.value = true
		else if(index == 3) show3.value = true
		else if(index == 4) show4.value = true
		else if(index == 5) show5.value = true
		else if(index == 6) show6.value = true
		else if(index == 7) show7.value = true
		else if(index == 8) show8.value = true
	}
	
	
	function clickMask(){
		uni.$xl.toast('事件触发父组件关闭')
		show5.value = false
	}
</script>

<style lang="scss" scoped>
	.content{
		margin-top: 200rpx;
		height: 300rpx;
		background: #fff;
	}
</style>